<template>
  <div class="wrapper">
    <div class="title">
      <p>同城交友</p>
    </div>
    <div class="box1">
      <template v-if="!phoneValue">
        <label for>账号</label>
        <input
          type="text"
          name="account"
          v-model="phone"
          value
          placeholder="请输入账号"
        />
      </template>
      <template v-if="phoneValue">
        <label for>手机号</label>
        <input
          type="text"
          name="account"
          v-model="phone"
          value
          placeholder="请输入手机号"
        />
      </template>
    </div>
    <div class="box2">
      <template v-if="!phoneValue">
        <label for>密码</label>
        <input
          type="password"
          name="password"
          v-model="password"
          value
          placeholder="请输入密码 "
        />
        <div></div>
      </template>
      <template v-if="phoneValue">
        <label for>验证码</label>
        <input
          type="password"
          name="password"
          v-model="password"
          value
          placeholder="请输入验证码 "
        />
        <button @click="yzm">发送验证码</button>
      </template>
    </div>
    <div class="btn" @click="login">
      <button>登录</button>
    </div>
    <div class="wal-three">
      <div @click="$jp('register',{ids:0})">注册</div>
      <div @click="$jp('register',{ids:1})">忘记密码</div>
      <!-- <div v-if="!phoneValue" @click="phoneBtn">手机号登录</div> -->
      <div v-if="phoneValue" @click="phoneBtn">账号登录</div>
    </div>
    <div class="wal-login" v-if="0">
      <div>
        <img :src="img.list1" alt srcset />
        <div>微信登录</div>
      </div>
      <div>
        <img :src="img.list2" alt srcset />
        <div>QQ登录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      img: {
        list1: require('../../../static/images/insert/weixin_icon.png'),
        list2: require('../../../static/images/insert/icon_QQ.png')
      },
      phone: '',
      password: '',
      phoneValue: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    yzm() {
      if (this.phone === '') {
        alert('手机号不能为空！')
      } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
        alert('手机号输入不正确！')
      } else {
        this.$axios({
          method: 'POST',
          url: 'Flink/Verification',
          data: {
            phone: this.phone
          }
        })
          .then(res => {
            this.password = res.data.data.Verification
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    login() {
      if (this.phone === '') {
        alert('手机号不能为空！')
      } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
        alert('手机号输入不正确！')
      } else {
        this.$axios({
          method: 'POST',
          url: 'NeedLoginAction/login',
          data: {
            phone: this.phone,
            password: this.password
          }
        })
          .then(res => {
            if (res.data.code === 200) {
              sessionStorage.token = res.data.data.token
              this.$jump('/homePage')
            } else {
              alert(res.data.msg)
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    phoneBtn() {
      this.phoneValue = !this.phoneValue
    }
  },
  created() {
    this.$axios({
      method: 'POST',
      url: 'Flink/isLogin',
      data: {}
    })
      .then(res => {
        if(res.data.code === 200){
          sessionStorage.token = res.data.data.token
          this.$jump('homePage')
        }
      })
      .catch(error => {
        console.log(error)
      })
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
  background: url('../../../static/images/homePageImg/bgimg.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 2.56rem;

  .btn {
    margin: 0.29rem auto 0;
    width: 8.44rem;
    height: 1.08rem;
    background-color: #323232;
    border-radius: 0.47rem;
    text-align: center;
    line-height: 1.08rem;

    button {
      font-family: 'PingFangSC-Regular';
      font-size: 0.45rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #ffffff;
      border: 0;
      background-color: #323232;
    }
  }

  .box2 {
    border-bottom: 0.01rem solid rgba($color: #ccc, $alpha: 0.5);
    margin: 0.56rem auto 0;
    width: 7.4rem;
    height: 0.7rem;
    padding: 0 0.53rem 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    label {
      font-family: 'PingFang-SC-Regular';
      font-size: 0.45rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #ffffff;
      opacity: 0.9;
    }

    input[type='password'] {
      width: 3rem;
      height: 0.6rem;
      font-family: 'PingFang-SC-Regular';
      font-size: 0.33rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #888888;
      background: none;
      padding-left: 1rem;
      box-sizing: border-box;
    }

    button {
      width: 2.49rem;
      height: 0.75rem;
      background-color: rgba($color: #b5b5b5, $alpha: 0.46);
      border-radius: 0.07rem;

      font-family: 'PingFang-SC-Regular';
      font-size: 0.37rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: rgba($color: #fff, $alpha: 0.8);
      border: 0;
    }

    div {
      width: 2.49rem;
      height: 0.75rem;
    }
  }

  .box1 {
    border-bottom: 0.01rem solid rgba($color: #ccc, $alpha: 0.5);
    margin: 0 auto;
    width: 7.4rem;
    height: 0.7rem;
    padding: 0 0.53rem 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    label {
      font-family: 'PingFang-SC-Regular';
      font-size: 0.45rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #ffffff;
      opacity: 0.9;
    }

    input[type='text'] {
      width: 6rem;
      height: 0.6rem;
      font-family: 'PingFang-SC-Regular';
      font-size: 0.33rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #888888;
      background: none;
      padding-left: 1rem;
      box-sizing: border-box;
    }
  }

  .title {
    margin: 0 auto 1.18rem;
    background: url('../../../static/images/homePageImg/bgimg1.png') no-repeat;
    border-radius: 50%;
    background-size: 100% 100%;
    width: 2.827rem;
    height: 2.787rem;
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      margin-left: 0.1rem;
      width: 1.2rem;
      height: 1.17rem;
      font-family: 'FZQKBYSJW--GB1-0';
      font-size: 0.52rem;
      font-weight: bold;
      font-stretch: normal;
      line-height: 0.67rem;
      letter-spacing: 0rem;
      color: #ffffff;
    }
  }
  .wal-three {
    margin: 0.48rem 0;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 0.373333rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #ffffff;
    & > div:nth-child(2) {
      margin-left: 0.293333rem;
    }
  }
  .wal-login {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 0.373333rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #ffffff;
    & > div {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      & > img {
        margin-right: 0.333333rem;
        width: 0.4rem;
        height: 0.4rem;
      }
    }
    & > div:nth-child(2) {
      margin-left: 1.133333rem;
    }
  }
}
</style>
